<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>英雄百科</title>
</head>

<body>
  <div class="main">
    <img class="cover"
      src="https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_f6416138ae858f73e2ca40a11587e17f/0" />
    <div class="hero-container">
      <input type="text" class="search" placeholder="检索" />
      <ul class="list">
        <li>
          <img src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png" alt="" />
          <p>安妮</p>
        </li>
      </ul>
    </div>
  </div>
  <div id="infoModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">黑暗之女安妮</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="info">
            <img src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png" class="icon img-thumbnail"
              alt="..." />
            <div class="progress-box">
              <div class="progress">
                <div class="attack progress-bar bg-success" style="width: 25%">攻击:</div>
              </div>
              <div class="progress">
                <div class="defense progress-bar bg-info" role="progressbar" style="width: 50%">防御:</div>
              </div>
              <div class="progress">
                <div class="magic progress-bar bg-warning" role="progressbar" style="width: 75%">魔法:</div>
              </div>
              <div class="progress">
                <div class="difficulty progress-bar bg-danger" role="progressbar" style="width: 100%">难度:</div>
              </div>
            </div>
          </div>
          <p>
            拥有危险夺命的能力，却长着一幅小大人儿的可爱模样，这就是掌握深不可测占火魔法的女孩——安妮。安妮生活在诺克萨斯北边的山脚下，但即便是在这种地方，她也依然是魔法师中的异类。她与火焰的紧密关系与生俱来——最初那些火焰是伴随着喜怒无常的冲动情绪出现的，后来她学会了如何掌握这些“好玩的小把戏”。其中，安妮最喜欢的就是她召唤亲爱的泰迪熊提伯斯——那头狂野的守护火兽。如今安妮已经迷失在了永恒的天真里，她在黑暗森林中游荡，寻觅着能陪自己玩耍的人。
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./lib/axios.js"></script>
<script src="./lib/bootstrap.min.js"></script>

<script>
  // 初始化模态框（勿删，勿修改）
  const modal = new bootstrap.Modal(document.querySelector('#infoModal'))

  // 1.获取并渲染页面
  function getHero(){
    axios.get('https://autumnfish.cn/api/lol/search')
  .then(({data:{data}})=> {
    // console.log(data)
   const str= data.map(({ title,icon,heroId })=>`
        <li>
            <img src="${icon}" alt="" data-index='${heroId}'/>
            <p>${title}</p>
        </li>
    `).join('')
    document.querySelector('.list').innerHTML=str
  })
  }
getHero()
  // 2.点击英雄渲染英雄页面
  document.querySelector('.list').addEventListener('click',function(e){
    if(e.target.tagName==='IMG'){
      // console.log(e.target);
      const id=e.target.dataset.index
      // console.log(id);

      axios.get(`https://autumnfish.cn/api/lol/info?id=${id}`)
      .then(({data:{code,data:{hero:{name,title,shortBio,attack,defense,magic,difficulty,icon}}}})=>{
      modal.show()
      document.querySelector('.modal').innerHTML=`
      <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${name}${title}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="info">
            <img src="${icon}" class="icon img-thumbnail"
              alt="..." />
            <div class="progress-box">
              <div class="progress">
                <div class="attack progress-bar bg-success" style="width: ${attack*10}%">攻击:</div>
              </div>
              <div class="progress">
                <div class="defense progress-bar bg-info" role="progressbar" style="width: ${defense*10}%">防御:</div>
              </div>
              <div class="progress">
                <div class="magic progress-bar bg-warning" role="progressbar" style="width: ${magic*10}%">魔法:</div>
              </div>
              <div class="progress">
                <div class="difficulty progress-bar bg-danger" role="progressbar" style="width: ${difficulty*10}">难度:</div>
              </div>
            </div>
          </div>
          <p>
            ${shortBio}
          </p>
        </div>
      </div>
    </div>
      `

      })
      // })
    
    }
  })
  
  // 3.搜索并渲染页面
  document.querySelector('.search').addEventListener('keyup',function(e){
  const q=this.value
if(e.key==='Enter'){
  // console.log(q);
  axios.get(`https://autumnfish.cn/api/lol/search?q=${q}`)
  .then(({data:{data}}) => {
    // console.log(data)
    document.querySelector('.list').innerHTML=data.map(({title,icon,heroId})=>`
    <li>
            <img src="${icon}" alt="" data-index='${heroId}'/>
            <p>${title}</p>
        </li>
    `).join('')
  }).catch(err => {
    // 请求失败时的提示搜索失败 并清空输入框
    alert('未搜索到相关英雄')
    document.querySelector('.search').value=''
  })
 
  
}
 else if(q.length===0){
getHero()
}
  })
  // 将来需要模态框显示的话，调用如下方法即可
  // modal.show()
</script>

</html>